<template>
  <div id="staff-employee">
    <!-- 面包屑 -->
    <span class="employee-hui">员工管理 / </span>
    <span class="employee-title">员工列表</span>
    <div id="employee-box">
      <!-- 内容 -->
      <div id="employee-content">
        <!-- 查询 -->
        <div id="employee-query">
          员工姓名：
          <el-input
            placeholder="请输入岗位名称"
            v-model="input"
            clearable
          ></el-input>

          <!-- 岗位 -->
          岗位：
          <el-input
            placeholder="请输入岗位名称"
            v-model="input2"
            clearable
          ></el-input>
          <!-- select -->
          所属部门：
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <!-- 按钮 -->
          <div>
            <el-button type="info" @click="empChongZhi" size="small"
              >重置</el-button
            >
            <el-button type="primary" @click="empChaXun" size="small"
              >查询</el-button
            >

            <!-- 新增 -->
            <el-button type="primary" @click="rXinZeng()" size="small"
              >新增</el-button
            >
          </div>
        </div>
      </div>
      <!-- 新增的内容 -->
      <el-dialog
        title="添加员工"
        :visible.sync="dialogVisible"
        width="45%"
        :before-close="handleClose"
      >
        <!-- 表单 -->
        <el-form
          :label-position="labelPosition"
          label-width="80px"
          :model="formLabelAlign"
          class="employee-form"
        >
          <!-- 姓名-性别 -->
          <div class="employee-name-sex">
            <!-- 姓名 -->
            <el-form-item label="姓名">
              <el-input v-model="formLabelAlign.name"></el-input>
            </el-form-item>

            <!-- 性别 -->
            <el-form-item label="性别" prop="resource">
              <el-radio-group v-model="formLabelAlign.sex">
                <el-radio label="男"></el-radio>
                <el-radio label="女"></el-radio>
              </el-radio-group>
            </el-form-item>
          </div>

          <!-- 员工类型-岗位-部门-图片 -->
          <div class="employee-imge">
            <!--员工类型  -->
            <el-form-item label="类型" prop="resource_sex">
              <el-radio-group v-model="formLabelAlign.staffClass">
                <el-radio label="试用"></el-radio>
                <el-radio label="实习"></el-radio>
                <el-radio label="正式"></el-radio>
              </el-radio-group>
            </el-form-item>

            <!-- 手机号 -->
            <el-form-item label="手机" class="employee-imge-department">
              <el-input v-model="formLabelAlign.phone"></el-input>
            </el-form-item>
          </div>

          <!-- 部门-岗位 -->
          <div class="forSelect2">
            <span>部门</span>

            <!-- 部门 -->
            <el-select
              v-model="formLabelAlign.department"
              @change="change2"
              placeholder="请选择"
            >
              <el-option
                v-for="item in optionsAdd"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>

            <span>岗位</span>
            <!-- 岗位 -->
            <el-select
              v-model="formLabelAlign.post"
              clearable
              placeholder="请选择"
            >
              <el-option
                v-for="item in postArr2"
                :key="item.post_id"
                :label="item.post_name"
                :value="item.post_id"
                >{{ item.post_name }}</el-option
              >
            </el-select>
          </div>

          <!-- 账号-密码 -->
          <div class="employee-number">
            <!-- 账号 -->
            <el-form-item label="账号">
              <el-input v-model="formLabelAlign.num"></el-input>
            </el-form-item>

            <!-- 姓名 -->
            <el-form-item label="密码">
              <el-input v-model="formLabelAlign.psd" type="password"></el-input>
            </el-form-item>
          </div>

          <!-- 入职时间-员工角色 -->
          <div class="employee-time">
            <!-- 入职时间 -->
            入职日期：
            <div class="block">
              <el-date-picker
                v-model="formLabelAlign.time"
                type="date"
                placeholder="选择日期"
                style="width: 99.9%"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd"
              >
                >
              </el-date-picker>
            </div>

            <!-- 员工角色 -->
            <span>角色</span> &nbsp;&nbsp;
            <el-select v-model="formLabelAlign.region" placeholder="员工角色">
              <el-option label="管理员" value="管理员"></el-option>
              <el-option label="普通员工" value="普通员工"></el-option>
            </el-select>
          </div>

          <!-- 长框框 -->
          <div class="employee-ad3">
            <!-- 工号 -->
            <el-form-item label="工号" class="employee-imge-department">
              <el-input v-model="formLabelAlign.job" disabled></el-input>
            </el-form-item>
            <!-- 身份证 -->
            <el-form-item label="身份证" class="employee-imge-department">
              <el-input v-model="formLabelAlign.idcard"></el-input>
            </el-form-item>
          </div>
        </el-form>

        <!-- 确认取消 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false" size="small"
            >取 消</el-button
          >
          <el-button type="primary" @click="formLabelXzQd()" size="small"
            >确 定</el-button
          >
        </span>
      </el-dialog>

      <!-- 表格 -->
      <div id="employee-table">
        <el-table :data="postYama" style="width: 100%">
          <!-- id -->
          <el-table-column prop="work_id" label="工号" width="140">
          </el-table-column>
          <!-- 岗位名称 -->
          <el-table-column prop="name" label="姓名" width="180">
          </el-table-column>
          <!-- 所属部门 -->
          <el-table-column prop="department_name" label="所属部门">
          </el-table-column>
          <!-- 岗位 -->
          <el-table-column prop="post_name" label="岗位"> </el-table-column>
          <!-- 管理级别 -->
          <el-table-column prop="is_admin" label="管理级别"> </el-table-column>
          <!-- 操作人 -->
          <el-table-column prop="post_operator" label="操作人">
          </el-table-column>
          <!-- 操作时间 -->
          <el-table-column prop="time" label="入职时间"> </el-table-column>
          <!-- 操作 -->
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="small"
                type="warning"
                @click="BianJiAdd(scope.$index, scope.row)"
                >编辑</el-button
              >
              <!-- 删除 -->
              <el-button
                size="small"
                type="danger"
                @click="open(scope.$index, scope.row)"
                >离职</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 编辑内容 -->
      <el-dialog
        title="提示"
        :visible.sync="dialogBianJi"
        width="40%"
        :before-close="handleBianJi"
      >
        <!-- 内容 -->

        <!-- 表单 -->
        <div style="margin: 20px"></div>
        <el-form
          :label-position="labelBianji"
          label-width="80px"
          :model="formLabelBianJi"
        >
          <!-- 工号 -->
          <el-form-item label="工号">
            <el-input v-model="formLabelBianJi.job" :disabled="true"></el-input>
          </el-form-item>

          <!-- 姓名 -->
          <el-form-item label="姓名">
            <el-input v-model="formLabelBianJi.name"></el-input>
          </el-form-item>

          <!-- 所属部门 -->
          <div class="forSelect">
            <span>所属部门</span>
            <el-select
              v-model="formLabelBianJi.department"
              placeholder="请选择"
              @change="change"
            >
              <el-option
                v-for="item in optionsBianJi"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>

          <!-- 测试岗位 -->
          <div class="forSelect">
            <span>选择岗位</span>
            <el-select
              v-model="formLabelBianJi.post"
              clearable
              placeholder="请选择"
            >
              <el-option
                v-for="item in postArr"
                :key="item.post_id"
                :label="item.post_name"
                :value="item.post_id"
                >{{ item.post_name }}</el-option
              >
            </el-select>
          </div>
          <!-- 岗位名称 -->
          <!-- <el-form-item label="岗位名称">
            <el-input v-model="formLabelBianJi.post"></el-input>
          </el-form-item> -->

          <!-- 管理级别 -->
          <div class="forSelect">
            <span>管理级别</span>
            <el-select v-model="formLabelBianJi.region" placeholder="请选择">
              <el-option
                v-for="item in optionsBianJi2"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>

          <!-- 操作人 -->
          <el-form-item label="操作人">
            <el-input
              v-model="formLabelBianJi.operator"
              :disabled="true"
            ></el-input>
          </el-form-item>
        </el-form>

        <!-- 确认取消 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogBianJi = false">取 消</el-button>
          <el-button type="primary" @click="BianJiQD()">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 分页 -->
      <div id="employee-page">
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalData"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 工号
      JobNumber: 0,
      // 总页数
      totalPag: 0,

      // 装岗位的数组
      postArr: [],
      // 新增的数组
      postArr2: [],
      // 总共数据
      totalData: 0,
      // 当前页
      page: 1,
      count: 5,
      //编辑 select
      options: [
        {
          value: "人事部",
          label: "人事部",
        },
        {
          value: "行政部",
          label: "行政部",
        },
        {
          value: "财务部",
          label: "财务部",
        },
        {
          value: "销售部",
          label: "销售部",
        },
        {
          value: "市场部",
          label: "市场部",
        },
      ],
      // 新增select
      optionsAdd: [
        {
          value: "人事部",
          label: "人事部",
        },
        {
          value: "行政部",
          label: "行政部",
        },
        {
          value: "财务部",
          label: "财务部",
        },
        {
          value: "销售部",
          label: "销售部",
        },
        {
          value: "市场部",
          label: "市场部",
        },
      ],
      value: "",
      //   搜input
      input: "",
      input2: "",
      //   表格数据
      tableData: [
        {
          work_id: "" /* 工号 */,
          name: "" /* 姓名 */,
          department_name: "" /* 部门 */,
          post_name: "" /* 岗位 */,
          is_admin: "" /* 管理级别 */,
          post_operator: "" /* 操作人 */,
          time: "" /* 入职时间 */,
        },
      ],
      currentPage1: 1,
      //   新增表单
      dialogVisible: false,
      //   表单表单
      labelPosition: "right",
      resource: "",
      resource_sex: "",
      formLabelAlign: {
        name: "" /* 员工名称 */,
        num: "" /* 账号 */,
        psd: "" /* 密码 */,
        phone: "" /* 员工手机 */,
        post: "" /* 岗位 */,
        department: "" /* 部门 */,
        sex: "男" /* 员工性别 */,
        staffClass: "实习" /* 员工类型 */,
        region: "" /* 员工角色 */,
        time: "" /*入职时间  */,
        job: "" /* 员工工号 */,
        idcard: "" /* 身份证 */,
      },
      // 编辑的 select
      // select
      optionsBianJi: [
        {
          value: "人事部",
          label: "人事部",
        },
        {
          value: "行政部",
          label: "行政部",
        },
        {
          value: "财务部",
          label: "财务部",
        },
        {
          value: "销售部",
          label: "销售部",
        },
        {
          value: "市场部",
          label: "市场部",
        },
      ],
      // 管理级别
      optionsBianJi2: [
        {
          value: "管理员",
          label: "管理员",
        },
        {
          value: "普通员工",
          label: "普通员工",
        },
      ],
      // 编辑表单
      dialogBianJi: false,
      labelBianji: "right",
      formLabelBianJi: {
        job: "" /* 工号 */,
        post_id: 0 /* 序列号 */,
        name: "" /* 员工名称 */,
        department: "" /* 部门 */,
        post: "" /* 岗位 */,
        region: "" /* 管理还是普通员工*/,
        operator: "" /* 操作人 */,
      },
      // 上传图片
      imageUrl: "",
    };
  },
  // 网页加载执行ajax
  mounted() {
    // 执行ajax
    this.postGet();
  },
  // 计算属性
  computed: {
    postYama() {
      return this.tableData.slice(
        (this.page - 1) * this.count,
        this.page * this.count
      );
    },
  },
  watch: {
    // 分页最后数据删除自动取前一页
    totalPag(val, old) {
      if (this.page > val) {
        this.page = val;
      }
    },
    // 自动获取 work_id
    tableData(val, old) {
      this.JobNumber = this.tableData[this.tableData.length - 1].work_id;
    },
  },
  methods: {
    //重置
    empChongZhi() {
      (this.input = ""), (this.input2 = ""), (this.value = "");
      this.page = 1;
      this.postGet();
    },
    // 查询
    empChaXun() {
      this.$axios({
        url: "/staffAdmin/empChaXun",
        params: {
          name: this.input /* 员工姓名 */,
          post: this.input2 /* 岗位 */,
          department: this.value /* 部门 */,
        },
      }).then((res) => {
        if (res.data.code == 200) {
          this.page = 1;
          this.totalData = res.data.data.length;
          this.tableData = res.data.data;
          console.log(this.tableData, this.totalData);
        }
      });
    },
    // 编辑选中部门自动获取岗位
    change() {
      this.formLabelBianJi.post = "";
      this.$axios({
        url: "/staffAdmin/empPostArray",
        params: {
          department: this.formLabelBianJi.department,
        },
      }).then((res) => {
        this.postArr = res.data.data;
        console.log(this.postArr);
      });
    },
    // 新增选中部门自动获取岗位
    change2() {
      this.$axios({
        url: "/staffAdmin/empPostArray2",
        params: {
          department: this.formLabelAlign.department,
        },
      }).then((res) => {
        this.postArr2 = res.data.data;
        console.log(this.postArr2);
      });
    },
    //渲染页面
    async postGet() {
      const { data: res } = await this.$axios({
        url: "/staffAdmin/empPost",
      });
      this.tableData = res.data;
      this.totalData = res.data.length;
      this.totalPag = Math.ceil(this.tableData.length / this.count);
    },
    //   分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.count = val;
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page = val;
    },
    // 删除
    open(index, row) {
      this.$confirm("此操作将永久删除该员工, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        // 删除 ajax
        .then(() => {
          this.$axios({
            method: "post",
            url: "/staffAdmin/empDel",
            data: {
              id: row.work_id,
            },
          }).then((res) => {
            if (res.data.code == 200) {
              this.tableData = this.tableData.filter((v) => {
                if (v.work_id != row.work_id) {
                  return v;
                }
              });
              this.totalPag = Math.ceil(this.tableData.length / this.count);
              this.totalData = this.tableData.length;
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 新增
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    rXinZeng() {
      this.dialogVisible = true;
      this.formLabelAlign.job = this.JobNumber + 1;

      (this.formLabelAlign.department = "") /* 部门 */,
        (this.formLabelAlign.num = "") /* 账号 */,
        (this.formLabelAlign.psd = "") /* 密码 */,
        (this.formLabelAlign.staffClass = "实习") /* 员工类型 */,
        (this.formLabelAlign.post = "") /* 岗位 */,
        this.formLabelAlign.sex /* 性别 */,
        (this.formLabelAlign.phone = ""); /* 手机号 */
      (this.formLabelAlign.name = "") /* 员工姓名 */,
        (this.formLabelAlign.region = "") /* 管理级别 */,
        (this.formLabelAlign.time = "") /* 转正日期 */,
        (this.formLabelAlign.idcard = ""); /* 身份证*/
    },
    // 新增确定
    formLabelXzQd() {
      this.$axios({
        method: "post",
        url: "/staffAdmin/addEmp",
        data: {
          work_id: parseInt(this.formLabelAlign.job) /* 工号 */,
          account: parseInt(this.formLabelAlign.num) /* 账号 */,
          password: this.formLabelAlign.psd /* 密码 */,
          type: this.formLabelAlign.staffClass /* 员工类型 */,
          jobs: parseInt(this.formLabelAlign.post) /* 岗位 */,
          sex: this.formLabelAlign.sex /* 性别 */,
          phone: parseInt(this.formLabelAlign.phone) /* 手机号 */,
          name: this.formLabelAlign.name /* 员工姓名 */,
          is_admin: this.formLabelAlign.region /* 管理级别 */,
          time: this.formLabelAlign.time /* 转正日期 */,
          idcard: parseInt(this.formLabelAlign.idcard) /* 身份证 */,
        },
      }).then((res) => {
        if (res.data.code == 200) {
          this.postGet();
          this.dialogVisible = false;
        }
      });
    },
    // 编辑X
    handleBianJi(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    // 编辑
    BianJiAdd(index, val) {
      this.dialogBianJi = true;
      this.formLabelBianJi.job = val.work_id; /* 工号 */
      this.formLabelBianJi.name = val.name;
      this.formLabelBianJi.department = val.department_name;
      this.formLabelBianJi.post = val.post_id;
      this.formLabelBianJi.region = val.is_admin;
      this.formLabelBianJi.operator = val.post_operator;
      this.formLabelBianJi.post_id = val.post_id;
      this.$axios({
        url: "/staffAdmin/empPostArray",
        params: {
          department: this.formLabelBianJi.department,
        },
      }).then((res) => {
        this.postArr = res.data.data;
      });
    },
    // 编辑确认
    BianJiQD() {
      let time = new Date();
      let time2 = time.toLocaleDateString();
      let time3 = time2.split("/").join("-");
      console.log(this.formLabelBianJi.post_id);
      this.$axios({
        method: "post",
        url: "staffAdmin/empBianJi",
        data: {
          id: this.formLabelBianJi.job,
          postId: this.formLabelBianJi.post,
          name: this.formLabelBianJi.name,
          region: this.formLabelBianJi.region,
          time: time3,
        },
      }).then((res) => {
        console.log(res);

        if (res.data.code == 200) {
          this.postGet();
        }
      });
      this.dialogBianJi = false;
    },
  },
};
</script>

<style lang="less" scoped>
#staff-employee {
  background: rgb(242, 242, 242);
  height: 100%;
  padding: 1.5% 2%;
}

// th 颜色
/deep/.el-table thead {
  color: #666;
  font-size: 16px;
}

// 内容容器
#employee-box {
  background: #fff;
  box-sizing: border-box;
  margin: 1.5% 0 0 0;
  padding: 1.6% 2%;
}
// 标题

// 查询容器
#employee-content {
  border-bottom: 1px solid rgb(231, 231, 231);
  box-sizing: border-box;
  padding: 0 0 2% 0;
}
// 查询
#employee-query .el-input {
  width: 15%;
}
#employee-query .el-select {
  width: 10%;
}

// 表格容器
#employee-table {
  margin: 2% 0 0 0;
  box-sizing: border-box;
}

#employee-query {
  display: flex;
  align-items: center;
}

#employee-query .el-input,
#employee-query .el-select {
  margin: 0 2% 0 0;
}

.employee-hui {
  color: #666;
}

// 分页
#employee-page {
  margin: 1.5% 0 0 0;
  text-align: right;
  overflow: hidden;
}

// 共多少数据
/deep/.el-pagination__total,
/deep/ .el-pagination__sizes {
  text-align: center;
  float: left;
  color: #999;
}

/deep/.el-input__inner {
  color: #666;
}

// 新增表单
.employee-form {
  overflow: hidden;
}

// 姓名-性别
.employee-name-sex {
  display: flex;
}

// 上传图片
/deep/.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 150px;
  line-height: 150px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.employee-imge {
  box-sizing: border-box;
  display: flex;
  margin: 0 0 22px 0;
}

// 右边距
.employee-imge .el-form-item {
  margin: 0 4.5% 0 0;
}
// radio 右边距
/deep/.employee-imge .el-radio {
  margin-right: 7.2px;
}

// 工号-身份证---
.employee-ad3 {
  margin: 3% 0 0 0;
}
.employee-ad3 .el-input {
  width: 91.7%;
}

// 员工时间
.employee-time {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0 0 0 1.5%;
}

.employee-time .block {
  margin: 0 6.6% 0 0;
  width: 202px;
}

// 账号密码
.employee-number {
  margin: 3% 0 0 0;
  display: flex;
}

// 编辑select
// 编辑的 select 样式
.forSelect {
  display: flex;
  align-items: center;
  margin: 0 0 24px 0;
  box-sizing: border-box;
  padding: 0 0 0 11px;
}
.forSelect span {
  margin: 0 12px 0 0;
}
.forSelect .el-select {
  width: 86.8%;
}

.forSelect2 {
  display: flex;
  align-items: center;
  margin: 0 0 24px 0;
  box-sizing: border-box;
  padding: 0 63px 0 39px;
}
.forSelect2 span {
  margin: 0 12px 0 0;
}
.forSelect2 .el-select {
  width: 38.8%;
}

.forSelect2 .el-select:first-of-type {
  margin: 0 37px 0 0;
}
</style>